<template>
  <!-- 树节点表单弹窗 -->
  <a-modal
    :title="headerTitle"
    :visible.sync="dialogVisible"
    :confirm-loading="loading"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <custom-form
        :form-list="formList"
        :form="form"
        edit-model="1"
      />

      <!-- <a-row v-if="form.parent">
                <a-col :md="20" :sm="20">
                    <a-form-model-item label="父节点">
                        <BaseInput disabled v-model.trim="form.parent" />
                    </a-form-model-item>
                </a-col>
            </a-row>

            <a-row>
                <a-col :md="20" :sm="20">
                    <a-form-model-item prop="name" label="节点名">
                        <BaseInput v-model.trim="form.name" />
                    </a-form-model-item>
                </a-col>
            </a-row> -->
    </a-form-model>
  </a-modal>
</template>

<script>
import TitleName from '@/components/TitleName/index.vue'
export default {
    props: {
        // 显隐控件
        visible: {
            type: Boolean,
            default() {
                return false
            }
        },
        // 表单
        form: {
            type: [Object, String],
            default() {
                return {}
            }
        },
        headerTitle: {
            type: String,
            default() {
                return ''
            }
        },
        formList: {
            type: Array,
            default() {
                return []
            }
        },
        rulesField:{
            type: Object,
            default() {
                return {}
            }
        }
    },
    computed: {
        // 弹窗控件
        dialogVisible: {
            get: function () {
                return this.visible
            },
            set: function (e) {
                this.$emit('update:visible', e)
            }
        }
    },
    data() {
        return {
            loading: false, // 确定按钮 loading
            rules: {
                name: [{ required: true, whitespace: true, message: '请填写节点名称', trigger: 'change' }]
            }
        }
    },
    methods: {
        handleOk() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.$emit('confirm')
                } else {
                  this.$message.warning("请填写完所有必填项信息")
                    console.log('error submit!!')
                    return false
                }
            })
        },
        handleCancel() {
            this.dialogVisible = false
        }
    },
    mounted(){
       if(this.rulesField){
         this.rules = {...this.rules,...this.rulesField}
       }
    },
    watch: {
        visible(e) {
            if (!e) {
                // 初始化表单
                this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate()
                })
            } else {
                this.$nextTick(() => {
                    const requireDom = document.querySelectorAll('.ant-form-item-required')
                    const requireDomArray = Array.from(requireDom)
                    requireDomArray.forEach((item) => {
                        item.parentNode.nextSibling.children[0].children[0].classList.add('requiredFormItem') // 找到'.ant-form-item-children'元素添加样式
                    })
                })
            }
        }
    }
}
</script>


